<template>
    <van-tabbar v-model="active">
        <van-tabbar-item icon="search" @click="toIndex()">首页</van-tabbar-item>
        <van-tabbar-item @click="toCategory()" icon="search">分类</van-tabbar-item>

        <van-tabbar-item  @click="toShoppingCart()">
            <span>购物车</span>
            <template #icon="props">
                <van-icon name="cart-o" :color="props.active ? `#1989fa`: `#515151`" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item icon="setting-o" @click="toMine">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script>
    export default {
        name: "Tabbar",
        props: ['show'],
        data() {
            return {
                active:  this.show,
                icon: {
                    active: 'https://img01.yzcdn.cn/vant/user-active.png',
                    inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
                },
            };
        },
        created() {
            this.printActive()
        },
        methods: {
            toIndex() {
                this.$router.push("/")
            },
            toCategory() {
                this.$router.push("/category")
            },
            toShoppingCart(){
                this.$router.push("/cart")
            },
            printActive(){
                console.log(this.active)
            },
            toMine(){
                this.$router.push("/mine")
            }
        }
    }
</script>

<style scoped>

</style>
